<template>
    <div class="system-menu-container layout-pd">
        <el-card shadow="hover">
            <div class="system-menu-search mb15">
                <el-input size="default" placeholder="请输入菜单名称" style="max-width: 180px"></el-input>
                <el-button size="default" type="primary" class="ml10">
                    <el-icon>
                        <ele-Search/>
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="menuDialogRef.openDialog('add')">
                    <el-icon>
                        <ele-FolderAdd/>
                    </el-icon>
                    新增菜单
                </el-button>
            </div>
            <el-table
                    :data="state.dataList"
                    v-loading="state.dataListLoading"
                    style="width: 100%"
                    row-key="menuId"
                    :tree-props="{ children: 'children' }"
            >
                <el-table-column label="菜单名称" show-overflow-tooltip>
                    <template #default="scope">
                        <SvgIcon :name="scope.row.meta.icon"/>
                        <span class="ml10">{{ $t(scope.row.meta.title) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="path" label="路由路径" show-overflow-tooltip></el-table-column>
                <el-table-column label="打开方式" show-overflow-tooltip width="120">
                    <template #default="scope">
                        <el-tag type="success" size="small" v-if="scope.row.isIframe">外部打开</el-tag>
                        <el-tag type="success" size="small" v-else >内部打开</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="是否隐藏" show-overflow-tooltip width="120" align="center">
                    <template #default="scope">
                        <el-tag type="success" size="small" v-if="scope.row.isHide">是</el-tag>
                        <el-tag type="success" size="small" v-else >否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="类型" show-overflow-tooltip width="80">
                    <template #default="scope">
                        <el-tag type="success" size="small" v-if="scope.row.menuType==='0'">菜单</el-tag>
                        <el-tag type="success" size="small" v-if="scope.row.menuType==='1'">按钮</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="权限标识" show-overflow-tooltip align="center">
                    <template #default="scope">
                        <span>{{ scope.row.meta.permissions }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="排序" show-overflow-tooltip width="80" prop="sortOrder" align="center">
                </el-table-column>
                <el-table-column label="操作" show-overflow-tooltip width="140" align="center">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="menuDialogRef.openDialog('addItem',scope.row.menuId)">新增</el-button>
                        <el-button size="small" text type="primary" @click="menuDialogRef.openDialog('edit', scope.row.menuId)">修改
                        </el-button>
                        <el-button size="small" text type="primary" @click="state.deleteHandle(scope.row.menuId)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <MenuDialog ref="menuDialogRef" @refresh="state.getDataList()"/>
    </div>
</template>

<script setup lang="ts" name="systemMenu">
import {defineAsyncComponent, reactive, ref, toRefs} from 'vue';
import {storeToRefs} from 'pinia';
import ApiConfig from "/@/api/ApiConfig";
import useView from "/@/hooks/useView";

const view = reactive({
    getDataListURL: ApiConfig.SYSTEM.MENU_LIST,
    getDataListIsPage: false,
    deleteURL: ApiConfig.SYSTEM.MENU,
    deleteIsBatch: true,
    dataForm: {
        original: ''
    },
    configVisible: false,
    uploadVisible: false
});

const state = reactive({...useView(view), ...toRefs(view)});


// 引入组件
const MenuDialog = defineAsyncComponent(() => import('/@/views/system/menu/dialog.vue'));

const menuDialogRef = ref();

</script>
